// 依赖
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import $ from 'jquery'
// 文件
import './css/App.css'
// 图片
import logo_pic from './images/mn_logo.png'
import logo_txt from './images/slogan_2015.png'
import weixincode from './images/footer_ewm.png'
import inform1 from './images/pic1.jpg'
import police from './images/pic2.jpg'
import inform2 from './images/pic3.jpg'
import safe from './images/pic6.jpg'
import codes from './images/index_linkma.png'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hotRent: ['北京', '上海', '重庆', '天津', '青岛', '秦皇岛', '三亚', '大连', '威海', '日照', '烟台', '厦门', '承德', '大理', '北海', '深圳', '沈阳', '成都', '苏州', '杭州', '西安', '广州', '长沙', '昆明', '南京', '武汉', '郑州', '石家庄', '无锡', '哈尔滨', '南昌', '海口', '黄山', '珠海', '宁波', '长春', '扬州', '唐山', '葫芦岛', '泰安', '贵阳', '桂林', '湘西', '合肥', '晋中', '西宁', '福州', '保定', '舟山', '东莞'],
      parters: ['火车票资讯', '成都租房', '找房子', '汽车时刻表查询', '太仓房产网', '酒店预订网', '装修网', '旅游攻略', '景点门票', '九寨沟旅游', '台湾旅游', '装修', '海外房产', '广州房产网', '装修网', '装修设计', '深圳房产', '北戴河家庭旅馆', '北戴河刘庄家庭旅馆', '重庆旅行社', '地图查询', '房产纠纷律师']
    }
  }
  render() {
    return (
      <div id="app">
        <Router>
          <div>
            <header id="header">
              {/*logo*/}
              <h1><img src={logo_pic} /><img src={logo_txt} title="一间房一种生活" /></h1>
              {/*导航*/}
              <nav>
                <ul>
                  <li><Link to="/home" className="active">首页</Link></li>
                  <li><Link to="/shortrent">特色短租</Link></li>
                  <li><Link to="/discovery">发现</Link></li>
                  <li><Link to="/phone">手机木鸟</Link></li>
                </ul>
              </nav>
              {/*登录注册*/}
              <div className="user">
                <Link to="/rental" className="rental">免费发布房源</Link>
                <div>
                  <Link to="/login">登录</Link>
                  <span>▪</span>
                  <Link to="/register">注册</Link>
                </div>
              </div>
            </header>
            <div>
              {/*该处写入路由路径*/}
            </div>
          </div>
        </Router>
        {/*尾部*/}
        <div className="footer-wrap">
          <footer id="footer">
            <div className="media">
              <a href="http://weibo.com/rizupingtai" className="weibo"></a>
              <a href="javascript:;" className="weixin">
                <div className="weixincode"><img src={weixincode} /></div>
              </a>
            </div>
            {/*一堆链接*/}
            <div className="links">
              <div>
                <span>热门短租：</span>
                <div className="inner">
                  <div>
                    {
                      this.state.hotRent.map(function (item, i) {
                        return (
                          <a href="javascript:;" key={i} title={item + "短租房"}>{item}短租房</a>
                        )
                      })
                    }
                  </div>
                  <strong className="unfold">+ 展开</strong>
                  <strong className="retract">- 收起</strong>
                </div>
              </div>
              {/*只在首页显示*/}
              <div className="home-display">
                <div>
                  <span>短租公寓推荐：</span>
                  <div className="inner">
                    <div>
                      {
                        this.state.hotRent.map(function (item, i) {
                          return (
                            <a href="javascript:;" key={i} title={item + "短租房公寓"}>{item}短租房公寓</a>
                          )
                        })
                      }
                    </div>
                    <strong className="unfold">+ 展开</strong>
                    <strong className="retract">- 收起</strong>
                  </div>
                </div>
                <div>
                  <span>友情链接：</span>
                  <div className="inner">
                    <div>
                      {
                        this.state.parters.map(function (item, i) {
                          return (
                            <a href="javascript:;" key={i}>{item}</a>
                          )
                        })
                      }
                    </div>
                    <strong className="unfold">+ 展开</strong>
                    <strong className="retract">- 收起</strong>
                  </div>
                </div>
              </div>
            </div>
            {/*相关信息*/}
            <div className="info">
              <div className="statement">
                <a href="javascript:;" title="免责声明">免责声明</a><span>|</span>
                <a href="javascript:;" title="关于我们">关于我们</a><span>|</span>
                <a href="javascript:;" title="联系我们">联系我们</a><span>|</span>
                <a href="javascript:;" title="法律声明">法律声明</a><span>|</span>
                <a href="javascript:;" title="新手指南">新手指南</a><span>|</span>
                <a href="javascript:;" title="帮助中心">帮助中心</a><span>|</span>
                <a href="javascript:;" title="短租房">短租房</a><span>|</span>
                <a href="javascript:;" title="新闻资讯">新闻资讯</a><span>|</span>
                <a href="javascript:;" title="媒体报道">媒体报道</a>
              </div>
              <div className="contact">
                <span>客服电话：400-056-0055 或 010-89180879</span>
                <span>客户服务：service@muniao.com</span>
                <span>意见反馈：feedback@muniao.com</span>
              </div>
              <div className="permit">
                <span>网站备案/许可证号：京ICP备12043553号-3 京公网安备11010802011855号 </span>
                <a href="javascript:;">营业执照编号 104555056</a>
                <span> 北京爱游易科技有限公司</span>
              </div>
              <div className="supervise">
                <a href="javascript:;"><img src={inform1} title="信息举报中心" /></a>
                <a href="javascript:;"><img src={police} title="网络110" /></a>
                <a href="javascript:;"><img src={inform2} title="互联网举报中心" /></a>
                <a href="javascript:;"><img src={safe} title="安全检测" /></a>
              </div>
            </div>
          </footer>
        </div>
        {/*侧边导航*/}
        <div id="sidenav">
          <div className="help">
            <a href="javascript:;" className="service">
              <a href="javascript:;" className="service-hover">在线客服</a>
            </a>
            <a href="javascript:;" className="order">
              <div className="order-hover">
                <h4>我的订单</h4>
                <span>查看您的近期订单</span>
                <a href="javascript:;" className="check">点击查看</a>
              </div>
            </a>
            <a href="javascript:;" className="qq">
              <div className="qq-hover">
                <img src={codes} />
              </div>
            </a>
            <a href="javascript:;" className="message">
              <div className="message-hover">
                <h4>问题反馈</h4>
                <span>请将您的问题告诉我们，我们将更好地为您服务</span>
                <a href="javascript:;" className="check">点击反馈</a>
              </div>
            </a>
          </div>
          <a href="javascript:;" className="gotop"></a>
        </div>
      </div>
    )
  }
  componentDidMount() {
    $('.unfold').click(function () {
      $(this).css('display', 'none')
      $(this).next().css('display', 'block')
      $(this).parent().css('height', 'auto')
    })
    $('.retract').click(function () {
      $(this).css('display', 'none')
      $(this).prev().css('display', 'block')
      $(this).parent().css('height', '30px')
    })
    $('.weixin').mouseover(function () {
      $(this).click(function () {
        $('.weixincode').css('display', 'block')
      })
    })
    $('.weixin').mouseout(function () {
      $('.weixincode').css('display', 'none')
    })
    document.onscroll = function () { 
      if ($(document).scrollTop() >= 300) {
        $('.gotop').css('display', 'block');
      } else { 
        $('.gotop').css('display', 'none');
      }
    }
    $('.gotop').click(function () { 
      $(document).scrollTop(0)
     })
  }
}

export default App;
